<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Daum Map</title>
<script type="text/javascript" src="http://apis.daum.net/maps/maps.js?apikey=ba76c348c625d0c91b99b2962f1371590046e1f4" charset="utf-8"></script>
</head>

<body>

<script type="text/javascript">
    var mark; //mark 전역 변수

    //mark의 위치 얻기    
    function getXY() {
        var point = mark.getPoint();
        alert(point.x + ',' + point.y);

        return;
    }
    
    function SelectDevArea() {

        var aDevInfoAddress = new Array;
        var aDevInfoX = new Array;
        var aDevInfoY = new Array;
        
        aDevInfoAddress[0] = "수서 동사무소";
        aDevInfoAddress[1] = "청담 동사무소";

        aDevInfoX[0] = 127.1049489;
        aDevInfoX[1] = 127.0492397;

        aDevInfoY[0] = 37.4888752;
        aDevInfoY[1] = 37.5250677;

        var icon = new DIcon("http://localimg.daum-img.net/localimages/07/2008/map/i_mks_b1.gif", new DSize(13, 16));

        var mylist = document.getElementById("devarea");
        var nIndex = mylist.selectedIndex;
        var sText = mylist[mylist.selectedIndex].text + "<br>(" + aDevInfoAddress[mylist.selectedIndex] + ")";
        var x = aDevInfoX[nIndex];
        var y = aDevInfoY[nIndex];
        
        alert( x );
        alert( y );

        //mark 추가
        icon.src = "http://localimg.daum-img.net/localimages/07/2008/map/i_mks_b1.gif";
        mark = new DMark(new DPoint(x, y), { mark: icon, draggable: true, infowindow: new DInfoWindow(sText, { show: true }) })
        map.addOverlay(mark);  // mark Overlay

        map.setCenter(new DPoint(x, y), 4); //한 번에 이동
        //map.panTo(new DPoint(x, y), 4); //부드럽게 이동
    }
     
</script>

<form>
    <select id="devarea" onchange="SelectDevArea()">
        <option value="0">수서 동사무소</option>
        <option value="1">청담 동사무소</option>
    </select>
    <button id="buttonGetXY" onclick="getXY()">중심 좌표 얻기</button>
</form>
        <div id="map" style="width:1000px;height:600px;"></div>
        <script type="text/javascript">
            var map = new DMap("map", { point: new DLatLng(37.48879895934866, 127.03130020103005), level: 4 });
            map.setCoordinateType("wgs84");
            //map.addControl(new DIndexMapControl());
            map.addControl(new DZoomControl());  
            
        </script>
</body>
</html>


